<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      /* 填写样式 */
      #go {
        padding: 3px 10px;
        color: #fff;
        background-color: #eeac1f;
        border: 1px solid #eeac1f;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <!-- 填写标签 -->
    <div>
      <span>正则表达式</span>
      <input type="text" id="regInput" />
      <input type="checkbox" id="global" checked>全局搜索</input>
      <input type="checkbox" id="all" checked>忽略大小写</input>
      <button id="go">计算</button>
    </div>
    <div id="result"></div>
    <script type="text/javascript">

      // reg.exec() 方法用于检索字符串中的正则表达式的匹配，如果字符串中有匹配的值返回该匹配值构成的数组 ，且该数组还有继承的属性
      // reg.test() 方法用于检测一个字符串是否匹配某个模式；如果字符串中有匹配的值返回 true ，否则返回 false
      // reg.search() 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果找到任何匹配的子串，则返回 该子串在原字符串中的第一次出现的位置。如果没有找到任何匹配的子串，则返回 -1
      // reg.replace() 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。原字符串不变，创建一个新的字符串 ，创建一个新的字符串，原字符串不变
      // reg.split() 用于把一个字符串按符合匹配条件的方式分割成一个字符串数组。不改变原字符串
      // reg.match() 将检索字符串 String，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。
      //　如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配，与exce的完全一致。
      // 如果 regexp 有标志 g，它将找到全部符合正则子字符串，并返回一个数组。
      // 如果没有找到任何匹配的文本，无论有没有g，match() 将返回 null
      
      const regInput = document.querySelector('#regInput');
      const global = document.querySelector('#global');
      const all = document.querySelector('#all');
      const go = document.querySelector('#go');
      const resultDiv = document.querySelector('#result');
    

      go.addEventListener('click', () => {
        let res = '';
        let num = 0;
        let flags = '';
        if (global.checked) {
          flags += 'g';  // 全局匹配
        }
        if (all.checked) {
          flags += 'i'; // 不区分大小写
        }
        let reg = new RegExp(regInput.value, flags);
        const word = 'happy\\s*elements'
        const regex = new RegExp(`\\b${word}\\b`, 'gi')  // \b 表示单词边界，gi 表示全局搜索和忽略大小写
        const matches = regInput.value.match(regex);
        if (matches) {
         num = matches.length;
         res = matches.join('<br>');
         }
        resultDiv.innerHTML = `共找到${num}处匹配:<br>${res}`;
      });
    </script>
  </body>
</html>